﻿<template>
    <div class="todo-li">
        <li>
            <label class="todo-item-label">
                <input type="checkbox" />
                <span>xxxxx</span>
            </label>
            <button class="todo-delete">删除</button>
        </li>
    </div>
</template>

<script>
    export default{
        name: 'MyItem',
        components:{}
    }
</script>

<style scoped>
    ul li{
        list-style: none;
    }
    .todo-li{
        position: relative;
        left: 5px;
        top: 5px;
        border-radius: 10px;
        width: 270px;
        height: 50px;
        background-color: chartreuse;
        margin-bottom: 5px;

    }
    .todo-item-label{
        position: absolute;
        left: 10px;
        font-size: 20px;
    }
    .todo-delete{
        position: absolute;
        left: 230px;
        top: 23px;
        border: none;
        color: #fff;
        width: 30px;
        height:25px;
        border-radius: 5px;
        background-color: #f00;
        cursor: pointer;
        transition: all 0.2s;
        opacity: 0;
    }
    .todo-delete:hover{
        opacity: 1;
    }
</style>